<!--大小额贷记来账业务手工处理页面-->
<template>
    <div class="app-container">
      <el-form :model="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="选项" label-width="80px">
              <el-input placeholder="请输入选项" v-model="form.bepsId" />
            </el-form-item>
          </el-col>
  
          <el-col :span="10">
            <el-form-item label="CPG日期" label-width="120px">
              <el-date-picker v-model="form.cpgDate" type="daterange" style="width: 100%" range-separator="-"
                start-placeholder="请输入CPG开始日期" end-placeholder="请输入CPG结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
  
          <el-col :span="6">
            <el-form-item label="non-STP原因" label-width="100px">
              <el-select v-model="form.nonStp" placeholder="non-STP原因">
                <el-option label="原因1" value="1"></el-option>
                <el-option label="原因2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
  
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="CPG日期" label-width="80px">
              <el-date-picker v-model="form.workDate" type="daterange" style="width: 100%" range-separator="-"
                start-placeholder="请输入工作开始日期" end-placeholder="请输入工作结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
  
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
  
        <el-col :span="6" class="menu-tree nav">
          <svg-icon icon-class="down_circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle" className="menu-tool-btn" />
          <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
        </el-col>
  
        <el-table :data="tableData" style="width: 100%;" height="400">
  
          <el-table-column prop="transDate" label="交易流水号" sortable width="300">
          </el-table-column>
          <el-table-column prop="cpgDate" label="CPG时间" sortable width="250">
          </el-table-column>
          <el-table-column prop="workDate" label="工作日期" sortable width="250">
          </el-table-column>
          <el-table-column prop="sysNO" label="系统编号" sortable width="250">
          </el-table-column>
          <el-table-column prop="messageType" label="报文类型" sortable width="150">
          </el-table-column>
          <el-table-column prop="stpType" label="non-STP类型" sortable width="250">
          </el-table-column>
          <el-table-column prop="busType" label="业务类型" sortable width="150">
          </el-table-column>
          <el-table-column prop="money" label="金额" sortable width="150">
          </el-table-column>
          <el-table-column prop="accDate" label="接受时间" sortable width="250">
          </el-table-column>
          <el-table-column fixed="right" class="table-header-cell" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="20">
          </el-pagination>
        </div>
  
      </el-form>
  
    </div>
  </template>
  <script>
  
  export default {
    name: "HvpsBepsCreditVostroHdWk",
    data() {
      return {
        currentPage4: 1, // 分页
        form: {
          bepsId: '', // 流水号
          cpgDate: '', // CPG日期
          nonStp: '', // non-STP原因
          workDate: '', // 工作日期
        },
  
        tableData: [
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
          {
            transDate: '12345678901111', // 交易流水号
            cpgDate: '2023-11-09', // CPG时间
            workDate: '2023-10-09', // 工作日期
            sysNO: '3676233450980948023', // 系统编号
            messageType: '中文', // 报文类型
            stpType: 'stp1', // STP类型
            busType: '业务1', // 业务类型
            money: '500,000,000', // 金额
            accDate: '2023-11-11' // 接受时间
          },
  
        ]
      };
    },
  
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      deleteRow(index, rows) {
        console.log("详情");
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
  
  
  };
  </script>
  <style lang="scss" >
  .menu-tool-btn {
    width: 24px;
    height: 24px;
  }
  
  .menu-tree {
    width: 100%;
    height: 5%;
    padding: 0px 0px 0px 16px;
    margin-left: 89%;
    font-size: 25px;
  }
  
  .block{
    float: right;
  }
  
  .table-header-cell {
      background-color: #e7e7e7 !important;
      font-size: 12px !important;
  }
  
  .el-table .el-table__header-wrapper th {
      background-color: #e7e7e7;
      font-size: 12px;
  }
  
  
  </style>
  